<template>
  <el-card class="table-card">
    <div class="operator-btns">
      <el-button v-for="(btn, index) in tableCardTree.btns" :key="index" size="mini" :type="btn.type||'primary'" :icon="btn.icon" @click="btn.click">{{btn.text}}</el-button>
    </div>
    <el-table
        :data="tableData"
        border
        @row-dblclick="tableCardTree.table.rowDblClick"
        style="width: 100%">
      <el-table-column
          v-if="tableCardTree.table.selection"
          type="selection"
          :width="tableCardTree.table.selection.width">
      </el-table-column>
      <el-table-column v-for="(col, index) in tableCardTree.table.columns"
          :prop="col.prop"
          :label="col.label"
          :width="col.width">
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator'

  @Component({
    components: {}
  })

  export default class TableCard extends Vue {
    tableData = [
      {date: '2018年5月8日', address: '北京'},
      {date: '2018年5月8日', address: '北京'},
      {date: '2018年5月8日', address: '北京'},
    ]
    tableCardTree = {
      btns: [
        {
          icon: 'el-icon-plus',
          text: '添加',
          click: (index) => {
            alert(index)
          }
        }
      ],
      table: {
        columns: [
          {label: '日期', prop: 'date', width: 120},
          {label: '地址', prop: 'address', width: 300},
          {label: '操作'},
        ],
        rowDblClick (row) {
          console.log(row)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .table-card{
    .operator-btns{
      margin-bottom: 10px;
    }
  }
</style>
